
//------- {{ animation__fadeIn }} -------//

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: translateY(30px);
    opacity: 0
  }
  to {
    -webkit-transform: translateY(0);
    opacity: 1
  }
}
@-moz-keyframes fadeIn {
  from {
    -moz-transform: translateY(30px);
    opacity: 0
  }
  to {
    -moz-transform: translateY(0);
    opacity: 1
  }
}
@-ms-keyframes fadeIn {
  from {
    -ms-transform: translateY(30px);
    opacity: 0
  }
  to {
    -ms-transform: translateY(0);
    opacity: 1
  }
}
@-o-keyframes fadeIn {
  from {
    -o-transform: translateY(30px);
    opacity: 0
  }
  to {
    -o-transform: translateY(0);
    opacity: 1
  }
}
@keyframes fadeIn {
  from {
    transform: translateY(30px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}

//------- {{ animation__fadeOut }} -------//

@-webkit-keyframes fadeOut {
  from {
    -webkit-transform: translateY(0);
    opacity: 1
  }
  to {
    -webkit-transform: translateY(-30px);
    opacity: 0
  }
}
@-moz-keyframes fadeOut {
  from {
    -moz-transform: translateY(0);
    opacity: 1
  }
  to {
    -moz-transform: translateY(-30px);
    opacity: 0
  }
}
@-ms-keyframes fadeOut {
  from {
    -ms-transform: translateY(0);
    opacity: 1
  }
  to {
    -ms-transform: translateY(-30px);
    opacity: 0
  }
}
@-o-keyframes fadeOut {
  from {
    -o-transform: translateY(0);
    opacity: 1
  }
  to {
    -o-transform: translateY(-30px);
    opacity: 0
  }
}
@keyframes fadeOut {
  from {
    transform: translateY(0);
    opacity: 1
  }
  to {
    transform: translateY(-30px);
    opacity: 0
  }
}

//------- {{ animation__flash }} -------//

@-webkit-keyframes flash {
  from, to {
    color: inherit;
    -webkit-transform: translateX(0);
  }
  35% {
    color: $flash;
    -webkit-transform: translateX(-.75em);
  }
}
@-moz-keyframes flash {
  from, to {
    color: inherit;
    -moz-transform: translateX(0);
  }
  35% {
    color: $flash;
    -moz-transform: translateX(-.75em);
  }
}
@-ms-keyframes flash {
  from, to {
    color: inherit;
    -ms-transform: translateX(0);
  }
  35% {
    color: $flash;
    -ms-transform: translateX(-.75em);
  }
}
@-o-keyframes flash {
  from, to {
    color: inherit;
    -o-transform: translateX(0);
  }
  35% {
    color: $flash;
    -o-transform: translateX(-.75em);
  }
}
@keyframes flash {
  from, to {
    color: inherit;
    transform: translateX(0);;
  }
  35% {
    color: $flash;
    transform: translateX(-.75em);
  }
}

//------- {{ animation__spin }} -------//

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(359deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


